<template>
    <div style="height: 100%;">
        <el-container style="height: 100%;">
            <el-aside width="260px" style="padding: 10px;box-sizing: border-box;background-color: #fff;
            border-left: 1px solid #eee;border-right: 2px solid #eee;margin-left: 5px">
            <el-input placeholder="请输入内容"></el-input>
                <!-- 1 -->
                <div>
                    <span class="el-icon-circle-plus-outline" @click="toggleElement"
                        :class="{ 'el-icon-remove-outline': isActive }">
                    </span>
                    <p style="font-size: ; display: inline-block;margin-left: 5px;">001-广东省检察院</p>

                    <div v-show="isVisible" style=" width: 150px;margin-left: 20px;">
                        <div>
                            <span class="el-icon-circle-plus-outline" @click="isActive4 = !isActive4"
                                :class="{ 'el-icon-remove-outline': isActive4 }">
                            </span>

                            <router-link to="/home/knowledge/wuJiC/wuJi5">
                                <p style="font-size: 14px; display: inline-block;margin-left: 5px;">广州市检察院</p>
                            </router-link>

                            <div v-show="isActive4">
                                <p style="font-size: 12px; display: inline-block;margin-left: 10px;">0010201-一区检察院</p>
                                <p style="font-size: 12px; display: inline-block;margin-left: 10px;">0010201-二区检察院</p>
                            </div>
                        </div>
                        <div>
                            <span class="el-icon-circle-plus-outline" @click="isActive3 = !isActive3"
                                :class="{ 'el-icon-remove-outline': isActive3 }">

                            </span>

                            <router-link to="/home/knowledge/wuJiC/wuJi6">
                                <p style="font-size: 14px; display: inline-block;margin-left: 5px;">深圳市检察院</p>
                            </router-link>

                            <div v-show="isActive3">
                                <p style="font-size: 12px; display: inline-block;margin-left: 10px;">0010201-三区检察院</p>
                                <p style="font-size: 12px; display: inline-block;margin-left: 10px;">0010201-四区检察院</p>
                            </div>
                        </div>
                        <div>
                            <span class="el-icon-circle-plus-outline" @click="isActive2 = !isActive2"
                                :class="{ 'el-icon-remove-outline': isActive2 }">
                            </span>
                            <p style="font-size: 14px; display: inline-block;margin-left: 5px;">东莞市检察院</p>
                            <div v-show="isActive2">
                                <p style="font-size: 12px; display: inline-block;margin-left: 10px;">0010201-五区检察院</p>
                                <p style="font-size: 12px; display: inline-block;margin-left: 10px;">0010201-六区检察院</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 2 -->

                <div>
                    <span class="el-icon-circle-plus-outline" @click="toggleElement2"
                        :class="{ 'el-icon-remove-outline': isActiveA }">

                    </span>
                    <p style="font-size: ; display: inline-block;margin-left: 5px;">002-XX省检察院</p>
                    <div style=" width: 150px;margin-left: 20px;" v-show="isVisibleA">
                        <span class="el-icon-circle-plus-outline" @click="isVisibleB = !isVisibleB"
                            :class="{ 'el-icon-remove-outline': isVisibleB }">

                        </span>
                        <p style="font-size: 14px; display: inline-block;margin-left: 5px;">XX市检察院1</p>
                        <div v-show="isVisibleB">
                            <p style="font-size: 12px;margin-left: 10px;">0010201-XX区检察院</p>
                            <p style="font-size: 12px;margin-left: 10px;">0010201-XX区检察院</p>
                        </div>
                    </div>

                    <div style="width: 150px;margin-left: 20px;" v-show="isVisibleA">
                        <span class="el-icon-circle-plus-outline" @click="isVisibleD = !isVisibleD"
                            :class="{ 'el-icon-remove-outline': isVisibleD }"></span>
                        <p style="font-size: 14px; display: inline-block;margin-left: 5px;">XX市检察院2</p>
                        <div v-show="isVisibleD" @click.stop>
                            <p style="font-size: 12px;margin-left: 10px;">0010201-XX区检察院2</p>
                            <p style="font-size: 12px;margin-left: 10px;">0010201-XX区检察院2</p>
                        </div>
                    </div>
                </div>



            </el-aside>
            <el-container style="height: 100%;">
                <RouterView></RouterView>
            </el-container>
        </el-container>
    </div>
</template>



<script>

export default {
    computed: {
        activeData() {
            return {
                isVisible: this.isVisible,
                isVisible2: this.isVisible2,
                isVisible3: this.isVisible3,

            };
        },
    },
    data() {
        return {
            isVisible: false,
            isVisibleA: false,
            isVisibleB: false,
            isActive: false,
            isActive2: false,
            isActive3: false,
            isActive4: false,
            isActiveA: false,
            isActiveB: false,
            isVisibleC: true,
            isVisibleD: false,
        };
    },
    methods: {
        toggleElement() {
            this.isVisible = !this.isVisible;
            this.isVisible2 = !this.isVisible2;
            // 在切换元素可见性的同时切换活动状态
            this.isActive = !this.isActive;
        },
        toggleElement2() {
            this.isVisibleA = !this.isVisibleA;
            this.isActiveA = !this.isActiveA;
        },
    },
};
</script>


<style scoped>
p {
    margin: 0;
    padding: 0;
}
a{
    color: #333;
}
.el-header,
.el-footer {
    color: #333;
}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
    line-height: 30px;
}

</style>